<template>
    <div class="app-center">
        <header-bar>
            <a-breadcrumb class="app-breadcrumb">
                <a-breadcrumb-item>
                    <router-link :to="`/setting/manager`">
                        员工管理
                    </router-link>
                </a-breadcrumb-item>
                <a-breadcrumb-item>添加员工</a-breadcrumb-item>
            </a-breadcrumb>
        </header-bar>
        <div class="app-inner clearfix">

                <a-form @submit="onSubmit" :autoFormCreate="(form) => this.form = form" class="staff-form">
                    <a-form-item label="员工账号"
                                 hasFeedback
                                 fieldDecoratorId="username"
                                 :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入员工账号'}],validateTrigger:'blur'}"
                                 :labelCol="formItemLayout.labelCol"
                                 :wrapperCol="formItemLayout.wrapperCol">
                        <a-input class="staff-input"></a-input>
                    </a-form-item>
                    <a-form-item label="员工姓名"
                                 hasFeedback
                                 fieldDecoratorId="description"
                                 :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入员工姓名'}],validateTrigger:'blur'}"
                                 :labelCol="formItemLayout.labelCol"
                                 :wrapperCol="formItemLayout.wrapperCol">
                        <a-input class="staff-input"></a-input>
                    </a-form-item>
                    <a-form-item label="手机"
                                 hasFeedback
                                 fieldDecoratorId="phone"
                                 :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入手机号码'}],validateTrigger:'blur'}"
                                 :labelCol="formItemLayout.labelCol"
                                 :wrapperCol="formItemLayout.wrapperCol">
                        <a-input class="staff-input"></a-input>
                    </a-form-item>

                    <a-form-item label="角色"
                                 :labelCol="formItemLayout.labelCol"
                                 fieldDecoratorId="role"
                                 :fieldDecoratorOptions="{rules:[{ required: true, message: '请选择角色'}],initialValue:role}"
                                 :wrapperCol="formItemLayout.wrapperCol">
                        <a-select style="width: 160px" @change="onChangeRole" placeholder="请选择角色">
                            <a-select-option v-for="item in roles" :value="item.name" :key="item.name">
                                {{ item.description }}
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                    <a-form-item label="所属门店" :labelCol="formItemLayout.labelCol"
                                 fieldDecoratorId="shop"
                                 :fieldDecoratorOptions="{}"
                                 :wrapperCol="formItemLayout.wrapperCol">
                        <a-select style="width: 160px" placeholder="请选择门店">

                        </a-select>
                    </a-form-item>
                    <a-form-item label="权限" :labelCol="formItemLayout.labelCol"
                    >
                        <a-spin :spinning="spinning">
                            <div class="staff-permission">
                                <a-tree :expandedKeys="expandedKeys" @expand="onExpand">
                                    <a-tree-node v-for="group in permissions" :key="group.name"
                                                 :title="group.short_name ? group.short_name: group.display_name">
                                        <a-tree-node v-for="child in group.children"
                                                     :class="!child.is_menu  ? 'flat-tree':''"
                                                     :key="child.name"
                                                     :title="child.display_name">
                                            <a-tree-node v-for="child2 in child.children"
                                                         :class="!child2.is_menu ? 'flat-tree':''"
                                                         :key="child2.name"
                                                         :title="child2.display_name">

                                            </a-tree-node>
                                        </a-tree-node>
                                    </a-tree-node>
                                </a-tree>
                            </div>
                        </a-spin>

                    </a-form-item>
                    <div class="staff-form__actions">
                        <a-button type="primary" class="staff-save-btn" :loading="loading" htmlType="submit">保存
                        </a-button>
                        <a-button @click="backPrev">取消</a-button>
                    </div>
                </a-form>
           
            <!--<Table :data="table.data" :loading="table.loading" :border="false" :columns="table.columns"-->
            <!--:no-data-text="table.noDataText"></Table>-->
            <!--<div class="app-pagination">-->
            <!--<Page :current="table.pagination.current" :total="table.pagination.total" show-sizer/>-->
            <!--</div>-->
        </div>

    </div>
</template>

<script lang="jsx">
    import HeaderBar from "@/components/HeaderBar";
    import {loadManager, loadRolePermissions, loadRoles, storedManager} from '@/api/setting/manager'
    import {mapState} from 'vuex'
    import Authorized from "../../../../components/Authorized";

    const formItemLayout = {
        labelCol: {span: 3},
        wrapperCol: {span: 6},
    }

    export default {
        name: "AddManager",
        components: {Authorized, HeaderBar},
        data() {
            return {
                keyWord: "",
                form: null,
                visible: false,
                formItemLayout,
                spinning: true,
                permissions: [],
                role: '',
                treeData: [],
                expandedKeys: [],
                loading: false

            }
        },

        computed: {
            ...mapState("admin/user", [
                'info'
            ]),
            ...mapState('admin/role', [
                'roles'
            ]),
        },


        watch: {
            "roles": function (val) {
                if (val && val.length > 0) {
                    this.role = val[0].name
                    if (this.role) {
                        this.loadRolePermission(this.role)
                    }
                }
            },
        },


        mounted() {
            this.loadRoleAll()
        },

        methods: {
            onExpand(keys) {
                this.expandedKeys = keys;
            },
            backPrev() {
                this.$router.go(-1)
            },
            onChangeRole(name) {
                console.log(name)
                this.loadRolePermission(name)
            },
            onSubmit(e) {
                e.preventDefault()
                this.form.validateFields((err, values) => {
                    if (!err) {
                        this.loading = true
                        storedManager(values).then(res => {
                            this.loading = false

                        }).catch(error => {
                            this.loading = false

                        });
                    }
                });
            },
            loadRoleAll() {
                this.$store.dispatch('admin/role/load')
            },
            loadRolePermission(role) {
                this.spinning = true
                loadRolePermissions({name: role}).then(res => {
                    let {data, keys} = this.mapData(res)
                    this.permissions = data
                    console.log(keys)
                    this.expandedKeys = keys
                    this.spinning = false

                }).catch(error => {
                    this.spinning = false
                })
            },
            mapData(data) {
                let exKeys = [];
                data.map((item) => {
                    exKeys.push(item.name);
                    if (item.children && item.children.length > 0) {
                        let {data, keys} = this.mapData(item.children)
                        item.children = data;
                        exKeys = exKeys.concat(keys);
                    }
                    return item;
                })
                return {data: data, keys: exKeys};
            }
        }
    }
</script>

<style scoped lang="less">
    @import "../../../../assets/form";

    .top-menu {
        height: 50px;
        line-height: 50px;
        border-bottom: 1px solid #e5e5e5;
    }

    .clearfix {
        zoom: 1;
    }

    .flat-tree {
        float: left;
    }

    .staff-permission /deep/ .ant-tree ul {
        display: block;
        overflow: hidden;
    }

    .app-center {
        .app-inner {
            margin: 10px;
            padding: 15px;
            min-width: 750px;
            min-height: 500px;
            box-shadow: 0 0 1px 0 rgba(0, 0, 0, .2);
            background-color: #fff;
            .app-pagination {
                margin-top: 16px;
                margin-left: auto;
                text-align: right;
            }

        }
        .app-breadcrumb {
            padding: 17px 21px;
        }
    }


</style>
